<%--
  Created by IntelliJ IDEA.
  User: xinlong
  Date: 2017/10/17
  Time: 18:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <%@include file="/resources/common/head.jsp" %>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-family: Microsoft Yahei;
        }
        body{
            background: url(/resources/images/register-background.png) no-repeat top center;
        }
        #container{
            width: 100%;
            position: absolute;
        }
        #header{
            width: 100%;
            height: 100px;
        }
        .header-panel{
            margin: 0px auto;
            max-width: 1200px;
            height: 100px;
        }
        .header-panel img{
            display: inline-block;
            padding-top: 10px;
            padding-bottom: 10px;
            max-height: 80px;
            float: left;
        }
        .header-panel-text{
            display: inline-block;
            margin-top: 25px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            color: #333;
            border-left: 1px solid #efefef;
            padding-left: 20px;
            float: left;
        }
        #center{
            width: 100%;
        }
        .center-panel{
            margin: 0px auto;
            padding-top: 40px;
            padding-left: 50px;
            padding-right: 50px;
            max-width: 800px !important;
            height: 500px;
        }
        .layui-container{
            max-width: 700px !important;
            padding: 50px;
            background: RGBA(0,0,0,0.4);
            color: #fff;
            border-radius:25px;
        }
        .layui-container-title-check{
            display: inline-block;
            width: 33%;
            height: 40px;
            border-top: 3px solid #33A3DC;
            margin-bottom: 40px;
            float: left;
            position: relative;
        }
        .layui-container-title{
            display: inline-block;
            width: 33%;
            height: 40px;
            border-top: 3px solid #999999;
            margin-bottom: 40px;
            float: left;
            position: relative;
        }
        .layui-container-title-check img,.layui-container-title img{
            position: absolute;
            top: -17px;
            right: 45%;
            width: 30px;
        }
        .layui-container-title-check span{
            position: absolute;
            top:15px;
            left: 35%;
            display: inline-block;
            color: #33a3dc;
        }
        .layui-container-title span{
            position: absolute;
            top:15px;
            left: 35%;
            display: inline-block;
            color: #999999;
        }
        #footer{
            width: 100%;
        }
        .footer-panel{
            margin: 0px auto;
            max-width: 1200px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="header">
        <div class="header-panel">
            <img src="/resources/images/icon/威旅商标-黑.png">
            <div class="header-panel-text">
                找回密码
            </div>
        </div>
    </div>
    <div id="center">
        <div class="center-panel">
            <div class="layui-container">
                <div class="layui-container-title-check">
                    <img src="/resources/images/icon/1-check.png">
                    <span>确认账户</span>
                </div>
                <div class="layui-container-title">
                    <img src="/resources/images/icon/2.png">
                    <span>验证用户</span>
                </div>
                <div class="layui-container-title">
                    <img src="/resources/images/icon/3.png">
                    <span>修改密码</span>
                </div>
                <form class="layui-form" action="/user/checkAnswer">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账户</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" required  lay-verify="required" placeholder="请输入账户" autocomplete="off" class="layui-input ">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="footer-panel">

        </div>
    </div>
</div>
<script type="text/javascript">
    //需要在页面加载时输出由后端传来的信息好像只能这样。。
    layui.define(['layer', 'form'], function(exports){
        var layer = layui.layer
                ,form = layui.form;

        //如果response为空
        if (${empty requestScope.response})
        {
            //什么事都不做=ω=
        }else{
            if(${requestScope.response.status == 0})
            {
                layer.msg("${response.msg}", {icon: 6});
            }else{
                layer.msg("${response.msg}", {icon: 5});
            }
        }

        exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
    });

</script>
</body>
</html>